<template>
  <el-menu
    :default-active="activeMenu"
    :uniqueOpened="true"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#ffffff"
    active-text-color="#ffd04b">
    <router-link to="/index">
        <el-menu-item index="Index" @click="selectMenu({name: 'Index', title: '首页'})">
          <!--<i class="el-icon-s-home"></i>-->
          <component :is="getIcon('House')" class="icon-cs"></component>
          <span>首页</span>
        </el-menu-item>
    </router-link>
    <!-- 循环分组 -->
    <el-sub-menu :index="menu.name" v-for="menu in menuList" :key="menu.name">
        <template #title>
          <!--<i :class="menu.icon"></i>-->
          <component :is="getIcon(menu.icon)" class="icon-cs"></component>
          <span>{{menu.title}}</span>
        </template>
        <!-- 循环菜单项 -->
        <router-link :to="item.path" v-for="item in menu.children" :key="item.name">
            <el-menu-item :index="item.name" @click="selectMenu(item)">
              <!--<i :class="item.icon"></i>-->
              <component :is="getIcon(item.icon)" class="icon-cs"></component>
              <span>{{item.title}}</span>
            </el-menu-item>
        </router-link>

    </el-sub-menu>
</el-menu>
</template>

<script>

export default {
    name: 'SiderMenu',
    data() {
        return {
          Edit: 'Edit'
        }
    },
    computed: {
        // 读取菜单列表
        menuList() {
            return this.$store.state.menus.menuList
        },
        // 活动标签
        activeMenu() {
            return this.$store.state.menus.editableTabsValue
        }
    },
    methods: {
      selectMenu(item) {
        // 添加标签
        this.$store.commit('addTab', item)
      },
      getIcon(name) {
        return name;
      }
    }
}
</script>

<style scoped>
  .el-menu-vertical-demo {
    height: 100%;
  }
</style>